import React from 'react'
import './Header.css'
import { Link,NavLink,useHistory,useLocation } from 'react-router-dom';
import { useAuth } from './AuthProvider';

const Header = () => {
    const history = useHistory();
    const location = useLocation();

    const {isLogin, setIsLogin} = useAuth();
    console.log(isLogin);

    const exit = () => {
        setIsLogin(false)
        localStorage.removeItem('isLogin');
        history.replace('/login');
    }

    return (
        <div className='header-wrap'>
            <div className='header'>
                <img className='logo' src="https://static2.cnodejs.org/public/images/cnodejs_light.svg" alt="" />
                <div className='nav'>
                    <NavLink exact activeStyle={{color: 'Khaki'}} to="/">首页</NavLink>
                    <NavLink activeStyle={{color: 'Khaki'}} to="/new">新手入门</NavLink>
                    <NavLink activeStyle={{color: 'Khaki'}} to='/collect'>收藏</NavLink>
                    <NavLink activeStyle={{color: 'Khaki'}} to='/user'>个人中心</NavLink>
                    {/* <NavLink activeStyle={{color: 'Khaki'}} to={ {pathname:'/lisi',state:{id:100}} }>用户</NavLink> */}

                    {
                        isLogin ? 
                        <>
                            <a href="">设置</a>
                            <a href="" onClick={exit}>退出</a>
                        </> : 
                        <NavLink activeStyle={{color: 'Khaki'}} to="/login">登录</NavLink>
                    }

                    {/* <Link to="/">首页</Link>
                    <Link to="/new">新手入门</Link>
                    <Link to="/login">登录</Link>
                    <Link to='/zhangsan'>API</Link>
                    <Link to={ {pathname:'/lisi',state:{id:100}} }>用户</Link> */}
                </div>
            </div>
        </div>
    )
}

export default Header
